<template>
  <div class="main-content">
    <div id="editor-view">
      <div class="toolbar animate__animated animate__fadeInDown">
        <h4 id="current-file">{{ currentFile || '选择一个文件进行编辑' }}</h4>
        <div class="toolbar-actions">
          <button 
            class="btn btn-outline-secondary me-2" 
            :class="{ 'active': editorMode === 'edit' }"
            @click="editorMode = 'edit'"
            :disabled="!currentFile || loading"
          >
            <i class="bi bi-pencil me-1"></i>编辑
          </button>
          <button 
            class="btn btn-outline-secondary me-2" 
            :class="{ 'active': editorMode === 'preview' }"
            @click="editorMode = 'preview'"
            :disabled="!currentFile || loading"
          >
            <i class="bi bi-eye me-1"></i>预览
          </button>
          <button class="btn btn-primary" :disabled="!currentFile || loading" @click="saveContent">
            <i class="bi bi-save me-2"></i>保存
          </button>
        </div>
      </div>
      
      <div class="editor-container animate__animated animate__fadeIn">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-overlay">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
          </div>
          <p class="mt-2">加载中...</p>
        </div>
        
        <div v-if="!currentFile" class="no-file-selected">
          <i class="bi bi-file-earmark-text"></i>
          <h5>请从左侧选择一个文件进行编辑</h5>
          <p class="text-muted mt-3">或者创建一个新的Markdown文件开始编辑</p>
        </div>
        <div v-else class="editor-wrapper">
          <!-- 编辑模式 -->
          <v-md-editor
            v-if="editorMode === 'edit'"
            v-model="editorContent"
            height="100%"
            :disabled-menus="[]"
            :toolbar="toolbar"
            :tab-size="2"
            :include-level="[1, 2, 3, 4, 5, 6]"
            placeholder="开始编写你的Markdown内容..."
            @change="onChange"
            @upload-image="handleUploadImage"
          ></v-md-editor>
          
          <!-- 预览模式 -->
          <v-md-preview
            v-if="editorMode === 'preview'"
            :text="editorContent"
            height="100%"
            class="enhanced-preview"
          ></v-md-preview>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditorPane',
  props: {
    currentFile: {
      type: String,
      default: null
    },
    content: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editorContent: '',
      isSaving: false,
      editorMode: 'edit', // 'edit' 或 'preview'
      toolbar: {
        bold: true,
        italic: true,
        header: true,
        underline: true,
        strikethrough: true,
        mark: true,
        superscript: true,
        subscript: true,
        quote: true,
        ol: true,
        ul: true,
        link: true,
        imagelink: true,
        code: true,
        table: true,
        fullscreen: true,
        readmodel: true,
        htmlcode: true,
        help: true,
        undo: true,
        redo: true,
        trash: true,
        save: true,
        navigation: true
      }
    }
  },
  watch: {
    currentFile() {
      this.updateEditorContent();
    },
    content() {
      this.updateEditorContent();
    }
  },
  methods: {
    updateEditorContent() {
      if (this.currentFile) {
        this.editorContent = this.content;
      } else {
        this.editorContent = '';
      }
    },
    onChange(text) {
      this.editorContent = text;
    },
    saveContent() {
      if (!this.currentFile || this.isSaving || this.loading) return;
      
      // 显示保存中状态
      this.isSaving = true;
      const button = event.currentTarget;
      button.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>保存中...';
      
      // 添加保存动画
      const editorWrapper = this.$el.querySelector('.editor-wrapper');
      editorWrapper.classList.add('animate__animated', 'animate__pulse');
      
      setTimeout(() => {
        editorWrapper.classList.remove('animate__animated', 'animate__pulse');
        
        // 恢复按钮状态
        this.isSaving = false;
        button.innerHTML = '<i class="bi bi-save me-2"></i>保存';
        
        // 发送保存事件
        this.$emit('save-content', this.editorContent);
      }, 1000);
    },
    handleUploadImage(event, insertImage, files) {
      // 图片上传处理
      console.log('上传图片:', files);
      
      // 这里可以实现图片上传到服务器的逻辑
      // 目前返回一个示例URL
      const file = files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          // 插入图片到编辑器
          insertImage({
            url: e.target.result,
            desc: file.name,
            width: 'auto',
            height: 'auto'
          });
        };
        reader.readAsDataURL(file);
      }
    }
  },
  mounted() {
    this.updateEditorContent();
  }
}
</script>

<style scoped>
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 30px;
  overflow-y: auto;
  background-color: #ffffff;
  transition: all var(--transition-speed);
}

.editor-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--box-shadow);
  transition: all var(--transition-speed);
  min-height: 500px;
  position: relative;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 2px solid #f1f3f5;
}

.toolbar h4 {
  margin: 0;
  font-weight: 600;
  color: var(--primary-color);
  display: flex;
  align-items: center;
}

.toolbar h4::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 24px;
  background-color: var(--accent-color);
  margin-right: 10px;
  border-radius: 2px;
}

.toolbar-actions {
  display: flex;
  align-items: center;
}

.editor-wrapper {
  flex: 1;
  border: 1px solid #e9ecef;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: all var(--transition-speed);
  display: flex;
  flex-direction: column;
  min-height: 400px;
  height: 100%;
}

.editor-wrapper:focus-within {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.2);
}

.no-file-selected {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #adb5bd;
  padding: 40px;
  text-align: center;
  background-color: #f8f9fa;
  border-radius: var(--border-radius);
}

.no-file-selected i {
  font-size: 5rem;
  margin-bottom: 1.5rem;
  color: var(--secondary-color);
  opacity: 0.7;
}

.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  padding: 8px 20px;
  border-radius: var(--border-radius);
  transition: all var(--transition-speed);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  background-color: #adb5bd;
  border-color: #adb5bd;
}

.btn-outline-secondary.active {
  background-color: var(--secondary-color);
  color: white;
  border-color: var(--secondary-color);
}

/* 自定义编辑器样式 */
:deep(.v-md-editor) {
  height: 100% !important;
  min-height: 400px;
}

:deep(.v-md-editor__editor-wrapper) {
  height: calc(100% - 40px) !important;
}

:deep(.v-md-editor .github-markdown-body) {
  padding: 15px;
}

/* 增强预览模式样式 */
.enhanced-preview {
  height: 100%;
  padding: 20px;
  overflow-y: auto;
}

:deep(.enhanced-preview .github-markdown-body) {
  padding: 0;
}

/* 代码块样式增强 */
:deep(.enhanced-preview pre) {
  border-radius: 10px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  margin: 1.5rem 0 !important;
  position: relative;
  overflow: hidden !important;
  background-color: #f5f5f5 !important; /* 灰色背景 */
}

:deep(.enhanced-preview pre::before) {
  content: '';
  height: 12px;
  width: 100%;
  background: linear-gradient(90deg, #ff5f56 6px, transparent 6px, transparent 12px, #ffbd2e 12px, transparent 18px, transparent 24px, #27c93f 24px, transparent 30px);
  display: block;
  position: relative;
  top: 0;
  left: 0;
  padding: 8px 0;
}

:deep(.enhanced-preview code) {
  padding-top: 1rem !important;
  background-color: transparent !important;
}

/* 修改复制按钮为图标 */
:deep(.v-md-copy-code-btn) {
  position: absolute !important;
  top: 12px !important;
  right: 10px !important;
  padding: 0 !important;
  font-size: 0 !important;
  width: 24px !important;
  height: 24px !important;
  background-color: transparent !important;
  border: none !important;
  opacity: 0.6 !important;
  transition: opacity 0.3s !important;
  z-index: 10 !important;
}

:deep(.v-md-copy-code-btn)::before {
  content: '\F50D' !important; /* 使用正确的复制图标代码 */
  font-family: 'bootstrap-icons' !important;
  font-size: 16px !important;
  color: #555 !important;
}

:deep(.v-md-copy-code-btn:hover) {
  opacity: 1 !important;
  background-color: transparent !important;
}

/* 强制覆盖prism.js的默认样式 */
:deep(.enhanced-preview pre[class*="language-"]), 
:deep(.enhanced-preview code[class*="language-"]) {
  background-color: #f5f5f5 !important;
  color: #333 !important;
  text-shadow: none !important;
}

:deep(.enhanced-preview .token.comment),
:deep(.enhanced-preview .token.prolog),
:deep(.enhanced-preview .token.doctype),
:deep(.enhanced-preview .token.cdata) {
  color: #708090 !important;
}

:deep(.enhanced-preview .token.punctuation) {
  color: #444 !important;
}

:deep(.enhanced-preview .token.property),
:deep(.enhanced-preview .token.tag),
:deep(.enhanced-preview .token.boolean),
:deep(.enhanced-preview .token.number),
:deep(.enhanced-preview .token.constant),
:deep(.enhanced-preview .token.symbol) {
  color: #905 !important;
}

:deep(.enhanced-preview .token.selector),
:deep(.enhanced-preview .token.attr-name),
:deep(.enhanced-preview .token.string),
:deep(.enhanced-preview .token.char),
:deep(.enhanced-preview .token.builtin) {
  color: #690 !important;
}

:deep(.enhanced-preview .token.operator),
:deep(.enhanced-preview .token.entity),
:deep(.enhanced-preview .token.url),
:deep(.enhanced-preview .language-css .token.string),
:deep(.enhanced-preview .style .token.string) {
  color: #9a6e3a !important;
  background: transparent !important;
}

:deep(.enhanced-preview .token.keyword) {
  color: #07a !important;
}

/* JSON代码块特殊样式 */
:deep(.enhanced-preview pre[class*="language-json"]) {
  background: #f5f5f5 !important; /* 统一使用灰色背景 */
}

:deep(.enhanced-preview pre[class*="language-json"]::before) {
  background: linear-gradient(90deg, #ff5f56 6px, transparent 6px, transparent 12px, #ffbd2e 12px, transparent 18px, transparent 24px, #27c93f 24px, transparent 30px),
              linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1));
}
</style>